<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 110px;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 5px;
            margin: 50px auto;
        }

        hr {
            margin: 10px 0;
        }
    </style>
</head>

<body>


    <div class="box">
        <input type="checkbox"> 全选
        <input type="checkbox"> 反选
        <hr>
        <input class="item" type="checkbox"> 选项一 <br>
        <input class="item" type="checkbox"> 选项二 <br>
        <input class="item" type="checkbox"> 选项三 <br>
        <input class="item" type="checkbox"> 选项四 <br>

    </div>
    <script>
        // 全选 
        // 1. 获取全选按钮 和 下面 所有 class 为item的input
        // 2. 获取它的状态 checked
        // 3. 下面所有的class item的状态都要跟随全选按钮的状态一致

        var allBtn = document.querySelector('input');
        var btn = document.querySelectorAll('input')[1];
        var itemEle = [...document.querySelectorAll('.item')];
        // 上面得到一个伪数组  我们需要转换成数组 才能使用forEach 等方法

        allBtn.onclick = function(){
            var state = allBtn.checked; //获取全选按钮的状态
            itemEle.forEach(function(item){ //遍历所有的item
            item.checked = state;
             // 将所有的item的状态跟随全选按钮的状态一致
            })

        }

        // 反选
        // 1. 获取反选按钮
        // 2. 获取所有的class 为 item的标签 
        // 3. 遍历所有的class 为 item的标签
        // 如果 是true 赋值 false 
        // 如果是false 赋值 true
        btn.onclick = function(){
            itemEle.forEach(function(item){
                item.checked = !item.checked;
            })
            allBtn.checked = !allBtn.checked;
        }



        // 思路2  
        // allBtn.onclick = function(){
        //    itemEle.forEach(function(item){
        //        item.checked = allBtn.checked;
        //    })
        // }


        // 思路3 
        // every 
        // 判断数组中的每一项是否都满足条件 
        // 如果都满足 返回true
        // 如果有一项不满足 返回false
        function handler() {
            var res = itemEle.every(function (item) {
                return item.checked == true;
            });
            allBtn.checked = res;
        }



        itemEle.forEach(function (item) {
            item.onclick = handler;
            // 如果 handler 给到 item.onlick 把函数赋值给了onlick
            // 如果 handler() 给到 item.onlick
            //  把函数执行的结果赋值给了onlick
        });



        // 思路4
    </script>
</body>

</html>